<template>
	<view class="log">
		<view class="main" v-show="mainShow">
			<view class="input_view">
				<input type="text"
				:class="isShake"
				v-model="loginInfo.uAccount" auto-blur
				placeholder="账号"
				>
				<hr>
				<input :class="isShake"
				v-if="hiddenPwd" type="password" 
				v-model="loginInfo.uPassword"
				auto-blur
				maxlength="13"
				placeholder="密码"
				>
				<input :class="isShake"
				v-else type="text"
				v-model="loginInfo.uPassword"
				@keyup.native.enter="toLogin" auto-blur
				maxlength="13"
				placeholder="密码"
				>
				<!-- eye  eye-fill eye-off -->
				<u-icon class="changePwdState" 
				@click="hiddenPwd=!hiddenPwd" 
				:name="hiddenPwd? 'eye':'eye-fill'"
				size="38"
				color="#4f4f4f"
				></u-icon>
			</view>
			<view class="btn_view">
				<u-checkbox-group>
					<u-checkbox 
					v-model="item.checked" 
					v-for="(item) in setRem" 
					:key="item.name" 
					:name="item.name">
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
				<u-button
				plain type="success"
				ripple ripple-bg-color="#ccdfd2"
				@click="toLogin"
				>登录</u-button>
				<!-- <u-button plain ripple @click="$emit("changeShow")">去注册</u-button> -->
			</view>
		</view>
	</view>
</template>

<script>
import { doLog } from '@/api/userApi.js'
export default{
	data(){
		return{
			loginInfo:{
				uAccount:"",
				uPassword:"",
			},
			hiddenPwd:true,
			isShake:' ',
			setRem:[
				{name:'自动登录',checked:true},
				// {name:'自动登录',checked:false},
			],
			mainShow:this.mode? true:false,
		}
	},
	props:["mode"],
	created() {
		console.log("创建了")
		const info = uni.getStorageSync('remInfo');
		// console.log(info)
		if(info)
			this.loginInfo = info
		console.log(this.mode)
	},
	methods:{
		error(info){
			this.isShake = "shakeThe "
			setTimeout(()=>{
				this.isShake = ' '
			},400)
			this.$emit("warning",info)
			uni.hideLoading()
		},
		async toLogin(){
			uni.showLoading({mask: true})
      const { loginInfo,loginInfo:{uAccount,uPassword} } = this
			if(!/^\d{6,13}$|^123$|^keke$/.test(uAccount)||!/^.{6,13}$|^123$/.test(uPassword)){
				this.error("账号/密码不规范")
				return;
			}
      const { token } = await doLog(loginInfo).catch(({msg})=>{
        uni.hideLoading()
        this.error("登录失败")
        throw new Error(msg)
      })
      const tag = await this.$store.dispatch('getInfo',token)
      if(!tag) { this.error("登录失败");return;}

      if(this.setRem[0].checked){
        uni.setStorageSync('remember the password',{uAccount,uPassword})
        uni.setStorageSync('SRC-TOKEN',{token})
      }else
        uni.setStorageSync('remember the password',{uAccount})
      uni.hideLoading()
      uni.switchTab({
				url:"/pages/my/my",
			})
		}
	},
	options:{
		addGlobalClass:true,
		styleIsolation: 'shared'
	},
	watch:{
		mode(){
			setTimeout(()=>{
				this.mainShow = !this.mainShow
			},400)
		}
	}
}
</script>

<style lang="scss" scoped>
.log{
	position: absolute;
	top: 0; bottom: 0px;left: 0;right: 0;
	background: #f4f4f4;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding-bottom: 35%;
	.main{
		// visibility: hidden;
		margin: auto;
		// border: 1px solid red;
		
		height:33vh;
		width: 600rpx;
		.input_view{
			position: relative;
			height:40%;
			border: 2px solid #fff;
			hr{
				height: 2px;
				background: #fff;
				border: none;
			}
			border-radius: 20rpx;
			input{
				padding-left: 5px;
				height: 50%;
			}
			.changePwdState{
				position: absolute;
				top: 75%;
				left: 90%;
				transform: translate(-50%,-50%);
			}
		}
		.btn_view{
			.u-checkbox-group{
				margin: 10rpx 0rpx;
				display: flex;
				justify-content: space-between;
				// align-items: center;
			}
			
			// display: flex;
			// justify-content: space-between;
			button{
				// margin: 0;
				// width: 45%;
			}
		}
	}
	.input-placeholder{
		color: #b5b5b5;
	}
}
</style>
